<script setup lang="ts">
import { reactive } from 'vue';
import Navigator from './components/Navigator.vue';
let paths = reactive([
  { title: 'Js之道', path: '/', active: true },
  { title: 'Js之法', path: '/jsmethod', active: false },
  { title: 'Js之术', path: '/jsart', active: false },
  { title: 'Js之器', path: '/jstool', active: false },
  { title: 'Js之势', path: '/jspower', active: false },
]);
const handleClick = (index: number) => {

  paths.forEach((item) =>item.active=false );
  paths[index].active=true
};
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-row :span="24" style="height: 100%; width: 100%">
          <el-col :span="2" v-for="(item, index) in paths">
            <Navigator
              class="navigator"
              :class="{ active: item.active }"
              @click="handleClick(index)"
              :title="item.title"
              :path="item.path"
              :key="item.title"
            />
          </el-col>
          <!-- <el-col sapn>5</el-col> -->
        </el-row>
      </el-header>
      <el-main>
        <router-view> </router-view>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
* {
  list-style: none;
  text-decoration: none;
  margin: 0px;
  padding: 0px;
}
.header {
  color: #111;
  background-color: rgb(239, 234, 229);
}
.navigator:hover {
  color: red;
  background-color: rgba(139, 137, 180, 0.5);
}
.active{
  background-color: rgba(139, 137, 180, 0.5);
}
.active a{
  color: #fff;
}
</style>
